<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue.draggable例子</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
    />
    <!--  引入loadsh -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style scoped>
      body{
        margin: 0;
      }
      /*被拖拽对象的样式*/
      .item {
        padding: 6px;
        background-color: #fdfdfd;
        border: solid 1px #eee;
        margin-bottom: 10px;
        cursor: move;
      }
      .item:hover {
        background-color: #f1f1f1;
        cursor: move;
      }
      /*选中样式*/
      .chosen {
        border: solid 2px #3089dc !important;
      }
      .contentBox {
        display: flex;
        flex-direction: column;
      }
      .contentBox-row {
        display: flex;
        min-height: 80px;
        background-color: aliceblue;
        margin-bottom: 12px;
      }
      .contentBox-row-item{
        padding: 10px;
        border: 1px solid black;
      }
      .contentBox-row-item-1 {
        flex: 1;
      }
      .contentBox-row-item-2 {
        flex: 2;
      }
      .contentBox-row-item-3 {
        flex: 3;
      }
      .contentBox-row-item-4 {
        flex: 4;
      }
      .contentBox-row-item-5 {
        flex: 5;
      }
      .box {
        width: 100%;
        height: 60px;
        border: 1px solid darkblue;
        position: relative;
        display: flex;
        /* 消除inline-block 之间的空格，换行符带来的间隙 */
        font-size: 0; 
      }
      /* 分割线的父级内容盒子 */
      .mid {
        display: inline-block;
        position: relative;
        height:100%;
        cursor: ew-resize;
        font-size: 12px;
        overflow: auto;
      } 
      .mid1{
        background-color: aqua;
        width:100px
      }
      .mid2{
        background-color: pink;
        width:300px;
      }
      .mid3{
        background-color: lightskyblue;
        width:100px;
      }
      /* 最后一个占据剩余宽度的盒子 */
      .last-flex {
        background-color: greenyellow;
        flex:1;
      }
      /* 分割线 */
      .midline{
        position: absolute;
        right:0;
        top:0;
        width:3px;
        height: 100%;
        background-color: #3089dc;
      }
          
    </style>
  </head>
  <body style="padding: 10px">
    <div id="app">
      <div>{{drag ? '拖拽中':'拖拽停止'}}</div>
      <div class="contentBox">
        <div class="contentBox-row">
          <div class="contentBox-row-item contentBox-row-item-1">
            <draggable
              v-model="myArray"
              chosen-class="chosen"
              force-fallback="true"
              group="people"
              animation="1000"
              @start="onStart"
              @end="onEnd"
            >
              <transition-group>
                <div class="item" v-for="element in myArray" :key="element.id">
                  {{element.name}}
                </div>
              </transition-group>
            </draggable>
          </div>

          <div class="contentBox-row-item contentBox-row-item-1">
            <draggable
              v-model="myArray2"
              chosen-class="chosen"
              force-fallback="true"
              group="people"
              animation="1000"
              @start="onStart"
              @end="onEnd"
            >
              <transition-group>
                <div class="item" v-for="element in myArray2" :key="element.id">
                  {{element.name}}
                </div>
              </transition-group>
            </draggable>
          </div>


        </div>

        <div class="contentBox-row">

        </div>
      </div>
 
       <div>2列分割展示</div>
       <div class="box" ref="box">
        <div class="mid mid1">
          <div class="midline" @mousedown="crossMousedown"  data-key="1-1"></div>
          在CSS布局中,如果我们想要将多个行内块元素并排,
          会发现同行显示的inline-block元素之间会出现一定的空隙,
          这就是换行符/空格导致的,叫做换行符/空格间隙。
           View Code 当使用行内元素进行排版的时候,元素之间的符号采取一个都不放过的原则,
           通通都会都浏览器渲染,其中就包括换行符和空格,这两个极易被我们忽视的符号也会被浏览器渲染。,根据white-space的处理方式(默认是normal,合并多余空白)会将HTML中回车换
        </div>
        <div class="last-flex"></div>
      </div>      

      <div>3列分割展示</div>
      <div class="box" ref="box">
        <div class="mid mid1">
          <div class="midline" @mousedown="crossMousedown"  data-key="1-2"></div>
        </div>
        <div class="mid mid2">
          <div class="midline"  @mousedown="crossMousedown"  data-key="2-2"></div>
        </div>
        <div class="last-flex"></div>
      </div>

    <div>4列分割展示</div>
    <div class="box" ref="box">
      <div class="mid mid1">
        <div class="midline"  @mousedown="crossMousedown"  data-key="1-3"></div>
      </div>
      <div class="mid mid2">
        <div class="midline"  @mousedown="crossMousedown"  data-key="2-3"></div>
      </div>
      <div class="mid mid3">
        <div class="midline"  @mousedown="crossMousedown"  data-key="3-3"></div>
      </div>     
      <div class="last-flex"></div>
    </div>

    </div>
    <script>
      const borderWidth = 3
      // 全局注册组件
      Vue.component("vuedraggable", window.vuedraggable);
      var app = new Vue({
        el: "#app",
        components: {
          vuedraggable: window.vuedraggable, //当前页面注册组件
        },
        data() {
          return {
            drag: false,
            myArray: [
              { people: "cn", id: 1, name: "www.itxst.com" },
              { people: "cn", id: 2, name: "www.baidu.com" },
              { people: "us", id: 4, name: "www.google.com" },
            ],
            myArray2: [
              { people: "cn2", id: 1, name: "2www.itxst.com" },
              { people: "cn2", id: 2, name: "2www.baidu.com" },
              { people: "cn2", id: 3, name: "2www.taobao.com" },
              { people: "us2", id: 4, name: "2www.google.com" },
            ],
            startX: null,
            endX: null,
          };
        },
        methods: {
          onStart() {
            this.drag = true;
          },
          onEnd() {
            this.drag = false;
          },
          // domIndex 第几个分割线  parentDom 父级元素
          // 获得的哥分隔符左边的坐标
          getDomIndexLeft(domIndex, parentDom, total) {
            const index = domIndex - 1;
            if (index == 0) return borderWidth; // 第一个分隔符最小位置
            let result = 0;
            for(let i = 0; i < index; i++) {
              result = result + parentDom.children[i].clientWidth + borderWidth;
            }
            return result
          },
          // domIndex 第几个分割线  parentDom 父级元素
          // 获得分隔符右边的坐标
          getDomIndexRight(domIndex, parentDom, total) {
            const allWidth = parentDom.clientWidth;
            if (domIndex == total) return allWidth - total * borderWidth;
            let result = 0;
            for(let i = 0; i <= domIndex; i++) {
              result = result + parentDom.children[i].clientWidth;
            }       
            // 总共宽度不能超过父级盒子的宽度
            return result
          },
          
          // 获得一个父级元素下的某个元素为基点的总宽度，默认是父级元素的宽度
          getPositionSpan (parentDom, index) {
           index = index || parentDom.children.length
           let result = 0;
           for (let i = 0; i<= index; i++) {
            result = result + parentDom.children[i].offsetWidth;
           } 
            return;
          },
          // 改变左右大小
          crossMousedown (e) {
            const _this = this;
            const dom = e.target; // 分割线元素
            const domMid = e.target.parentElement; // 分割线所处的容器
            const domMidNext = domMid.nextElementSibling; // 当前拖曳元素的下一个兄弟元素
            const rowBox = e.target.parentElement.parentElement; // 这一行
            const rowBoxLeft = rowBox.offsetLeft;
            const infos = dom.getAttribute('data-key').split('-');
            const domIndex = Number(infos[0]);
            const domTotal =  Number(infos[1]);
                
            // 获取划线框的左右移动最大最小距离
            const left = this.getDomIndexLeft(domIndex, rowBox, domTotal);
            const right = this.getDomIndexRight(domIndex, rowBox, domTotal);
            this.startX = e.pageX; // 记录下下初始位置, pageX 鼠标相对于整个页面左边的距离
            document.onmousemove = function(e) {
              _this.endX = e.pageX
              console.log('横向距离', e.pageX)
              // 需要去掉行的边距影响, 鼠标相对于row 盒子最左边的距离
              const mouseRowX = e.pageX - rowBoxLeft;
              if (mouseRowX <= left || mouseRowX >= right ) return
              const domMidWidth = e.pageX - left
              domMid.style.width = domMidWidth + 'px'
              // 拖拽线不是最后一个
              if (domMidNext && domIndex < domTotal) {
                domMidNext.style.width = right - domMidWidth + 'px'
              }
              _this.startX = _this.endX
            }
            document.onmouseup = function() {
              //事件解绑
              document.onmousemove = null
              document.onmouseup = null
            }            
          },
        },
      });
    </script>
  </body>
</html>
